<template>
  <div class="pa-2">
    <v-card width="400px">
      <v-card-title>message</v-card-title>
      <v-card-actions>
        <v-btn @click="infoMessage">info</v-btn>
        <v-btn @click="successMessage">success</v-btn>
        <v-btn @click="warnMessage">warn</v-btn>
        <v-btn @click="errorMessage">error</v-btn>
      </v-card-actions>
    </v-card>
    <v-card width="400px">
      <v-card-title>confirm</v-card-title>
      <v-card-actions>
        <v-btn @click="confirm">confirm</v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class Test extends Vue {
  infoMessage() {
    this.$message.info("我是一条info消息");
  }

  successMessage() {
    this.$message.success("我是一条success消息");
  }

  warnMessage() {
    this.$message.warning("我是一条warn消息");
  }

  errorMessage() {
    this.$message.error("我是一条error消息");
  }

  async confirm() {
    try {
      await this.$confirm.Confirm("是否选择");
      this.$message.success("已确认操作");
    } catch {
      this.$message.warning("已取消操作");
    }
  }
}
</script>
